    <style>
      :host {
        -webkit-tap-highlight-color: transparent;
        align-items: center;
        cursor: pointer;
        display: flex;
        outline: none;
        user-select: none;

        /* Sizes. */
        --cr-checkbox-border-size: 2px;
        --cr-checkbox-size: 16px;
        --cr-checkbox-ripple-size: 40px;

        /* Derived sizes (offsets). */
        --cr-checkbox-ripple-offset: calc(var(--cr-checkbox-size)/2 -
            var(--cr-checkbox-ripple-size)/2 - var(--cr-checkbox-border-size));

        /* --cr-checked-color automatically flips for light/dark mode. */
        --cr-checkbox-checked-box-color: var(--cr-checked-color);
        --cr-checkbox-ripple-checked-color: var(--cr-checked-color);

        /* Light mode colors. */
        --cr-checkbox-checked-ripple-opacity: .2;
        --cr-checkbox-mark-color: white;
        --cr-checkbox-ripple-unchecked-color: var(--google-grey-900);
        --cr-checkbox-unchecked-box-color: var(--google-grey-700);
        --cr-checkbox-unchecked-ripple-opacity: .15;
      }

      @media (prefers-color-scheme: dark) {
        :host {
          /* Dark mode colors. */
          --cr-checkbox-checked-ripple-opacity: .4;
          --cr-checkbox-mark-color: var(--google-grey-900);
          --cr-checkbox-ripple-unchecked-color: var(--google-grey-500);
          --cr-checkbox-unchecked-box-color: var(--google-grey-500);
          --cr-checkbox-unchecked-ripple-opacity: .4;
        }
      }

      :host-context([chrome-refresh-2023]):host {
        --cr-checkbox-ripple-size: 32px;
        --cr-checkbox-checked-box-color: var(--color-checkbox-foreground-checked,
            var(--cr-fallback-color-primary));
        --cr-checkbox-unchecked-box-color: var(--color-checkbox-foreground-unchecked,
            var(--cr-fallback-color-outline));
        --cr-checkbox-ripple-checked-color: var(--cr-active-background-color);
        --cr-checkbox-ripple-unchecked-color: var(--cr-active-background-color);
        --cr-checkbox-ripple-offset: 50%;
        --cr-checkbox-ripple-opacity: 1;
      }

      :host([disabled]) {
        cursor: initial;
        opacity: var(--cr-disabled-opacity);
        pointer-events: none;
      }

      :host-context([chrome-refresh-2023]):host([disabled]) {
        opacity: 1;
        --cr-checkbox-checked-box-color: var(--color-checkbox-background-disabled,
            rgba(var(--cr-fallback-color-on-surface-rgb), .12));
        --cr-checkbox-unchecked-box-color: var(--color-checkbox-background-disabled,
            rgba(var(--cr-fallback-color-on-surface-rgb), .12));
        --cr-checkbox-mark-color: var(--color-checkbox-foreground-disabled,
            rgba(var(--cr-fallback-color-on-surface-rgb), var(--cr-disabled-opacity)));
      }

      #checkbox {
        background: none;
        border: var(--cr-checkbox-border-size) solid
            var(--cr-checkbox-unchecked-box-color);
        border-radius: 2px;
        box-sizing: border-box;
        cursor: pointer;
        display: block;
        flex-shrink: 0;
        height: var(--cr-checkbox-size);
        margin: 0;
        outline: none;
        padding: 0;
        position: relative;
        transform: none;  /* Checkboxes shouldn't flip even in RTL. */
        width: var(--cr-checkbox-size);
      }

      :host-context([chrome-refresh-2023]):host([disabled][checked]) #checkbox {
        border-color: transparent;
      }

      :host-context([chrome-refresh-2023]) #hover-layer {
        display: none;
      }

      :host-context([chrome-refresh-2023]) #checkbox:hover #hover-layer {
        background-color: var(--cr-hover-background-color);
        border-radius: 50%;
        display: block;
        height: 32px;
        left: 50%;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 32px;
      }

      @media (forced-colors: active) {
        /* paper-ripple is not showing in Windows HCM. Use outline instead. */
        :host(:focus) #checkbox {
          outline: var(--cr-focus-outline-hcm);
        }
      }

      :host-context([chrome-refresh-2023]) #checkbox:focus-visible {
        border: none;
        outline: 2px solid var(--cr-focus-outline-color);
      }

      #checkmark {
        display: block;
        /* Automatically adjust color of the checkmark SVG in forced colors mode.
         * Otherwise, this property defaults to preserve-parent-color.
         * https://www.w3.org/TR/css-color-adjust-1/#forced-color-adjust-prop */
        forced-color-adjust: auto;
        position: relative;
        transform: scale(0);
        z-index: 1;
      }

      #checkmark path {
        fill: var(--cr-checkbox-mark-color);
      }

      :host([checked]) #checkmark {
        transform: scale(1);
        /* Only animate when showing checkmark. */
        transition: transform 140ms ease-out;
      }

      :host([checked]) #checkbox {
        background: var(--cr-checkbox-checked-box-background-color,
            var(--cr-checkbox-checked-box-color));
        border-color: var(--cr-checkbox-checked-box-color);
      }

      :host-context([chrome-refresh-2023]):host([checked]) #checkbox:focus-visible {
        background-clip: padding-box;
        border: 2px solid transparent;
      }

      paper-ripple {
        --paper-ripple-opacity: var(--cr-checkbox-ripple-opacity,
            var(--cr-checkbox-unchecked-ripple-opacity));
        color: var(--cr-checkbox-ripple-unchecked-color);
        height: var(--cr-checkbox-ripple-size);
        left: var(--cr-checkbox-ripple-offset);
        outline: var(--cr-checkbox-ripple-ring, none);
        pointer-events: none;
        top: var(--cr-checkbox-ripple-offset);
        transition: color linear 80ms;
        width: var(--cr-checkbox-ripple-size);
      }

      :host([checked]) paper-ripple {
        --paper-ripple-opacity: var(--cr-checkbox-ripple-opacity,
            var(--cr-checkbox-checked-ripple-opacity));
        color: var(--cr-checkbox-ripple-checked-color);
      }

      :host-context([dir=rtl]) paper-ripple {
        left: auto;
        right: var(--cr-checkbox-ripple-offset);
      }

      :host-context([chrome-refresh-2023]) paper-ripple {
        transform: translate(-50%, -50%);
      }

      #label-container {
        color: var(--cr-checkbox-label-color, var(--cr-primary-text-color));
        padding-inline-start: var(--cr-checkbox-label-padding-start, 20px);
        white-space: normal;
      }

      :host(.label-first) #label-container {
        order: -1;
        padding-inline-end: var(--cr-checkbox-label-padding-end, 20px);
        padding-inline-start: 0;
      }

      :host(.no-label) #label-container {
        display: none;
      }

      /* Hidden from UI, but not screen readers. */
      #ariaDescription {
        height: 0;
        overflow: hidden;
        width: 0;
      }
    </style>
    <div id="checkbox" tabindex$="[[tabIndex]]" role="checkbox"
        on-keydown="onKeyDown_" on-keyup="onKeyUp_" aria-disabled="false"
        aria-checked="false" aria-labelledby="label-container"
        aria-describedby="ariaDescription">
      <!-- Inline SVG paints faster than loading it from a separate file. -->
      <svg id="checkmark" width="12" height="12" viewBox="0 0 12 12"
          fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="m10.192 2.121-6.01 6.01-2.121-2.12L1 7.07l2.121 2.121.707.707.354.354 7.071-7.071-1.06-1.06Z">
      </svg>
      <div id="hover-layer"></div>
    </div>
    <div id="label-container" aria-hidden="true" part="label-container">
      <slot></slot>
    </div>
    <div id="ariaDescription" aria-hidden="true">[[ariaDescription]]</div>
